<template>
  <div>
    <el-dialog title="考勤组编辑" :visible.sync="dialogvisible" width="750px" append-to-body class="my-dialog"
               :close-on-click-modal="false" @close="cancel">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="考勤组名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入考勤组名称"/>
            </el-form-item>
            <div class="setting-box">
              <div class="setting-box-title">
                <div class="setting-box-title-l">
                  考勤人员/部门
                </div>
                <el-button type="text" @click="showRulefn('attend_user')">设置</el-button>
              </div>
              <div class="setting-box-list">
                <div class="setting-box-list-l">
                  参与考勤人员/部门：
                </div>
                <div class="setting-box-list-r">
                  {{ deptName ? deptName : '未设置' }}
                </div>
              </div>
              <!--              <div class="setting-box-list">-->
              <!--                <div class="setting-box-list-l">-->
              <!--                  无需考勤人员：-->
              <!--                </div>-->
              <!--                <div class="setting-box-list-r">-->
              <!--                  未设置-->
              <!--                </div>-->
              <!--              </div>-->
            </div>

            <div class="setting-box">
              <div class="setting-box-title">
                <div class="setting-box-title-l">
                  考勤时间
                </div>
                <el-button type="text" @click="showRulefn('attend_time')">设置</el-button>
              </div>
              <div class="setting-box-list">
                <div class="setting-box-list-l">
                  考勤类型：
                </div>
                <div class="setting-box-list-r">
                  {{
                    attendanceTime ? (attendanceTime.attendanceType == 1 ? '固定班制 (固定时间上下班)' : '排班制 (按排班上下班)') : '未设置'
                  }}
                </div>
              </div>
              <div class="setting-box-list" v-if="attendanceTime && attendanceTime.attendanceType == 1">
                <div class="setting-box-list-l">
                  工作日设置：
                </div>
                <div class="setting-box-list-r">
                  {{ attendanceTimeName ? attendanceTimeName : '未设置' }}
                </div>
              </div>
              <div></div>
            </div>

            <div class="setting-box">
              <div class="setting-box-title">
                <div class="setting-box-title-l">
                  加班规则
                </div>
                <el-button type="text" @click="showRulefn('ruleTable')">设置</el-button>
              </div>
              <div class="setting-box-list">
                <div class="setting-box-list-l">
                  规则名称：
                </div>
                <div class="setting-box-list-r">
                  {{ ruleTime ? ruleTime.name : '未设置' }}
                </div>
              </div>
              <div class="setting-box-list">
                <div class="setting-box-list-l">
                  工作日：
                </div>
                <div class="setting-box-list-r" v-if="ruleTime && ruleTime.overtimeWork.type">
                  {{
                    ruleTime.overtimeWork.method == 1 ? '加班必须审批，加班时长以审批单为准' : (ruleTime.overtimeWork.method == 2 ? '加班必须审批，以打卡为准，但不能超过审批单时长' : '加班无须审批，根据打卡时间计算加班时长')
                  }}
                </div>
                <div class="setting-box-list-r" v-else>未设置</div>
              </div>
              <div class="setting-box-list">
                <div class="setting-box-list-l">
                  休息日：
                </div>
                <div class="setting-box-list-r" v-if="ruleTime && ruleTime.overtimeRest.type">
                  {{
                    ruleTime.overtimeRest.method == 1 ? '加班必须审批，加班时长以审批单为准' : (ruleTime.overtimeRest.method == 2 ? '加班必须审批，以打卡为准，但不能超过审批单时长' : '加班无须审批，根据打卡时间计算加班时长')
                  }}
                </div>
                <div class="setting-box-list-r" v-else>未设置</div>
              </div>
              <div class="setting-box-list">
                <div class="setting-box-list-l">
                  节假日：
                </div>
                <div class="setting-box-list-r" v-if="ruleTime && ruleTime.overtimeHoliday.type">
                  {{
                    ruleTime.overtimeHoliday.method == 1 ? '加班必须审批，加班时长以审批单为准' : (ruleTime.overtimeHoliday.method == 2 ? '加班必须审批，以打卡为准，但不能超过审批单时长' : '加班无须审批，根据打卡时间计算加班时长')
                  }}
                </div>
                <div class="setting-box-list-r" v-else>未设置</div>
              </div>
            </div>
            <div class="setting-box">
              <div class="setting-box-title">
                <div class="setting-box-title-l">
                  外勤规则
                </div>
                <el-button type="text" @click="showRulefn('field_settings')">设置</el-button>
              </div>
              <div class="setting-box-list">
                <div class="setting-box-list-l">
                  {{ fieldSetting.isOut ? '允许外勤打卡' : '不允许外勤打卡' }}
                </div>
                <div class="setting-box-list-r">
                </div>
              </div>
              <div class="setting-box-list" v-if="fieldSetting.isOut">
                <div class="setting-box-list-l">
                  {{ `外勤打卡${fieldSetting.outIsPic ? '需' : '无需'}拍照` }}
                </div>
                <div class="setting-box-list-r">
                </div>
              </div>
              <div class="setting-box-list" v-if="fieldSetting.isOut">
                <div class="setting-box-list-l">
                  {{ `外勤打卡${fieldSetting.outIsRemark ? '需' : '无需'}填写备注` }}
                </div>
                <div class="setting-box-list-r">
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" size="small" plain>确 定</el-button>
        <el-button @click="cancel" size="small" plain>取 消</el-button>
      </div>
    </el-dialog>
    <rule :visible.sync="ruleVisible" :pagetype="pagetype" @getParam="getParam"
          :param="paramRule"></rule>
  </div>
</template>

<script>
import {addAttendGroup, updateAttendGroup, getAttendGroup} from "@/api/system/attend_group";
import rule from "./rule";

export default {
  props: ['visible', 'paramId'], // param 执勤点信息
  name: "index",
  components: {rule},
  data() {
    return {
      dialogvisible: false,
      form: {
        name: ''
      },
      zhudian_list: [],
      user_list: [],
      loading_zhudian: false,
      loading_user: false,
      postlist: [],
      ruleVisible: false,
      ruleTime: null,
      pagetype: '',
      attendanceTime: null,
      attendanceTimeName: null,
      weekName: ['一', '二', '三', '四', '五', '六', '日'],
      paramRule: null,
      deptName: '',
      deptData: [],// 参与的部门
      userData: [], // 参与人
      fieldSetting: {
        isOut: 1, // 是否允许打卡
        outIsPic: 1, // 外勤是否需要照片
        outIsRemark: 1 // 外勤是否需要备注
      }, // 外勤打卡
      rules: {
        name: [
          {required: true, message: "外勤组名称不能为空", trigger: "blur"}
        ]
      }
    }
  },
  watch: {
    visible() {
      this.dialogvisible = this.visible
      if (this.visible) {
        if (this.paramId) {
          this.getDetail()
        }
      } else {
        this.reset()
      }
    }
  },
  methods: {
    reset() {
      this.attendanceTime = null
      this.Name = null
      this.deptData = []// 参与的部门
      this.deptName = ''
      this.userData = [] // 参与人
      this.form.name = ''
      this.ruleTime = null
      this.attendanceTimeName = ''
      this.fieldSetting = {
        isOut: 1, // 是否允许打卡
        outIsPic: 1, // 外勤是否需要照片
        outIsRemark: 1 // 外勤是否需要备注
      } // 外勤打卡
    },
    getDetail() {
      getAttendGroup(this.paramId).then(res => {
        console.log('res:', res)
        this.form.name = res.data.detail.name
        let user_ = []
        let user_name = []
        if (res.data.depts) {
          for (let item of res.data.depts) {
            user_.push({
              id: item.deptId,
              name: item.deptName,
              type: 'dept'
            })
            user_name.push(item.deptName)
          }
        }
        if (res.data.users) {
          for (let item of res.data.users) {
            user_.push({
              id: item.userId,
              name: item.nickName,
              type: 'user'
            })
            user_name.push(item.nickName)
          }
        }

        this.deptName = user_name.join('、')
        this.deptData = this.$deepCopy(user_)
        this.ruleTime = this.$deepCopy(res.data.rule)

        let name_ = []
        let signCategory_ = {}
        if (res.data.signCategory) {
          for (let index in res.data.signCategory) {
            let item = res.data.signCategory[index]
            if (item) {
              signCategory_[index] = item
              name_.push(`周${this.weekName[index]}`)
            }
          }
        }
        this.attendanceTime = this.$deepCopy({
          attendanceType: res.data.detail.type,
          content: signCategory_
        })
        this.attendanceTimeName = name_.join(' ')
        this.fieldSetting = this.$deepCopy({
          isOut: res.data.detail.isOut, // 是否允许打卡
          outIsPic: res.data.detail.outIsPic, // 外勤是否需要照片
          outIsRemark: res.data.detail.outIsRemark // 外勤是否需要备注
        })
      })
    },
    submitForm() {
      // name 考勤组名称
      // deptIds 参与部门
      // overtimeRulesId 加班规则id
      // type 1-固定班制2-排班制
      // detail 详情
      // isOut 是否允许外勤打卡
      // outIsPic 外勤是否需要照片
      // outIsRemark 外勤是否需要备注

      // deptData: [],// 参与的部门
      // ruleTime 加班规则
      // fieldSetting 外勤设置
      // attendanceTime ? (attendanceTime.attendanceType == 1 ? '固定班制 (固定时间上下班)' : '排班制 (按排班上下班)') : '未设置'

      this.$refs["form"].validate(valid => {
        if (valid) {
          let quety_ = this.$deepCopy(this.form)
          let deptIds_ = []
          let userIds_ = []
          for (let item of this.deptData) {
            console.log('item:', item)
            if (item.type == "dept") {
              deptIds_.push(item.id)
            }
            if (item.type == "user") {
              userIds_.push(item.id)
            }
          }
          quety_.userIds = userIds_.join(',')
          quety_.deptIds = deptIds_.join(',')
          quety_.overtimeRulesId = this.ruleTime ? this.ruleTime.id : 0
          quety_.type = this.attendanceTime ? this.attendanceTime.attendanceType : 0
          quety_.isOut = this.fieldSetting.isOut
          quety_.outIsPic = this.fieldSetting.outIsPic
          quety_.outIsRemark = this.fieldSetting.outIsRemark
          let attendance_ = []
          if (this.attendanceTime.attendanceType == 1) {
            for (let i = 0; i < 7; i++) {
              attendance_[i] = 0
              if (this.attendanceTime.content[i]) {
                attendance_[i] = this.attendanceTime.content[i].id
              }
            }
          }
          quety_.detail = attendance_.join(',')
          console.log('提交的参数信息：', quety_)
          // let status = 1
          // if(status){
          //   return
          // }
          if (this.paramId) {
            quety_.id = this.paramId
            updateAttendGroup(quety_).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.$emit('getList')
              this.cancel();
            });
          } else {
            addAttendGroup(quety_).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.$emit('getList')
              this.cancel()
            });
          }
        }
      });
    },
    cancel() {
      this.$emit('update:visible', false)
    },
    getParam(item) {
      console.log('item==>', item)
      if (item.type === 'rule') {
        // 加班规则
        this.ruleTime = item.data
      } else if (item.type === 'attendanceTime') {
        // 考勤时间
        this.attendanceTime = item.data
        if (item.data.content) {
          let name_ = []
          for (let i = 0; i < 7; i++) {
            if (item.data.content[i]) {
              name_.push(`周${this.weekName[i]}`)
            }
          }
          this.attendanceTimeName = name_.join(' ')
        }
      } else if (item.type === 'attend_user') {
        // 考勤人员 can not
        let deptName = []
        for (let dept of item.data.can) {
          deptName.push(dept.name)
        }
        this.deptName = deptName.join('、')
        this.deptData = item.data.can
      } else if (item.type === 'field_settings') {
        // 外勤设置
        this.fieldSetting.isOut = item.data.isOut ? 1 : 0
        this.fieldSetting.outIsPic = item.data.outIsPic ? 1 : 0
        this.fieldSetting.outIsRemark = item.data.outIsRemark ? 1 : 0
      }
    },
    showRulefn(option) {
      console.log('ruleTime==>', this.ruleTime)
      // 考勤时间
      if (option === 'attend_time') {
        this.paramRule = this.$deepCopy(this.attendanceTime)
      }
      // 外勤设置
      if (option === 'field_settings') {
        this.paramRule = this.$deepCopy(this.fieldSetting)
      }
      // 考勤人员
      if (option === 'attend_user') {
        this.paramRule = this.$deepCopy(this.deptData)
      }
      // 加班规则
      if (option === 'ruleTable') {
        this.paramRule = this.$deepCopy(this.ruleTime)
      }

      this.pagetype = option
      this.ruleVisible = true
    }
  }
}
</script>

<style scoped>
.setting-box {
  margin-bottom: 10px;
  padding-left: 18px;
}

.setting-box-title {
  display: flex;
  align-items: center;
}

.setting-box-title-l {
  color: #000;
  margin-right: 10px;
}

.setting-box-list {
  display: flex;
  align-items: center;
  color: rgba(23, 26, 29, .6);
  font-size: 14px;
}
</style>
